<template>
  <div class="page-x" style="width: 100%; height: 100%">
    <h3 style="color: #fff;" v-if="title">{{ tasktype + '--' + title }}</h3>
    <div id="wordCloud" ref="wordCloud" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts-wordcloud';

export default {
  name: 'WordCloud',
  props: ['graphData', 'title', 'tasktype'],
  watch: {
    graphData: {
      handler(newData) {
        // 数据变化时更新词云
        if (newData) {
          this.updateWordCloud(newData);
        }
      },
      deep: true, // 深度监听对象或数组变化
      immediate: true // 组件初始化时立即触发（可选，根据需求）
    }
  },
  mounted() {
    // 初始化时创建 ECharts 实例并保存为组件属性
    this.chartDom = this.$refs.wordCloud;
    this.myChart = echarts.init(this.chartDom);
    // 首次加载数据（如果初始数据已存在）
    if (this.graphData) {
      this.updateWordCloud(this.graphData);
    }
  },
  beforeUnmount() {
    // 组件卸载时销毁 ECharts 实例，避免内存泄漏
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },
  methods: {
    updateWordCloud(data) {
      // 检查 ECharts 实例是否已初始化
      if (!this.myChart) {
        return;
      }
      // 生成配置项
      const option = {
        series: [
          {
            type: 'wordCloud',
            gridSize: 20,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'circle',
            textStyle: {
              normal: {
                color: () => `rgb(
                  ${Math.floor(Math.random() * 128) + 128},
                  ${Math.floor(Math.random() * 128) + 128},
                  ${Math.floor(Math.random() * 128) + 128}
                )`,
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: data.map(item => ({ // 确保数据格式为 {name, value}
              name: item.name,
              value: item.value
            }))
          }
        ]
      };

      // 设置配置项（自动合并新旧配置）
      this.myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
/* 建议添加容器的最小高度，避免尺寸为 0 */
.page-x {
  min-height: 400px;
  /* 或根据需求设置 */
}
</style>